---
title: 新手上路
description: Astro 簡介。
i18nReady: true
tableOfContents: false
editUrl: false
next: false
banner:
  content: |
    <a href="https://astro.build/blog/astro-4/">Astro 4.0 現已發布！</a>
    準備好升級了？<a href="/zh-tw/guides/upgrade-to/v4/">參考升級指南</a>。
hero:
  title: Astro 文件
  tagline: 提供指南、資源和 API 參考，協助你使用 Astro 開發。
  actions:
    - text: 新手上路
      icon: rocket
      link: /zh-tw/install/auto/
      variant: primary
    - text: 瞭解 Astro 的特色
      icon: right-arrow
      link: /zh-tw/concepts/why-astro/
  facepile:
    tagline: 由 Astro 和開源貢獻者共同出品。
    linkText: 加入我們！
    link: /zh-tw/contribute/
---

import { CardGrid } from '@astrojs/starlight/components'
import Card from '~/components/Landing/Card.astro'
import ListCard from '~/components/Landing/ListCard.astro'
import SplitCard from '~/components/Landing/SplitCard.astro'
import Discord from '~/components/Landing/Discord.astro'

<CardGrid>
  <Card title="你要用 Astro 打造甚麼？" icon="laptop">
    探索 [Astro 起始佈景主題](https://astro.build/themes/)。部落格、作品集、文件、登陸頁面、SaaS、行銷、電商網站⋯⋯應有盡有！
  </Card>

  <Card title="教學導覽" icon="star">
    從[建立部落格](/zh-tw/tutorial/0-introduction/)教學中學習基礎知識，建立你的第一個 Astro 網站。
  </Card>

  <SplitCard title="開始你的第一個專案" icon="rocket">
    ```sh
    # 以 npm 建立新專案
    npm create astro@latest
    ```

    [安裝指南](/zh-tw/install/auto/)提供詳細步驟，教你如何透過 CLI 精靈安裝 Astro、從現有 Astro GitHub 倉儲新增專案，以及手動安裝 Astro。
  </SplitCard>

  <ListCard title="學習" icon="open-book">
    - [Astro 的主要特色](/zh-tw/concepts/why-astro/)
    - [群島架構](/zh-tw/concepts/islands/)
    - [Astro 元件](/zh-tw/basics/astro-components/)
    - [Astro 模板語法](/zh-tw/basics/astro-syntax/)
  </ListCard>

  <ListCard title="延伸" icon="puzzle">
    - [與 React、Tailwind 等整合](/zh-tw/guides/integrations-guide/)
    - [建立型別安全的內容合集](/zh-tw/guides/content-collections/)
    - [以 view transition 增強導覽體驗](/zh-tw/guides/view-transitions/)
    - [將專案連接到 headless CMS](/zh-tw/guides/cms/)
  </ListCard>
</CardGrid>

<Discord title="遇到問題了？想要參與社群？" cta="加入我們的 Discord"/>
